<!DOCTYPE html>
<!--
	WWW SQL Designer, (C) 2005-2015 Ondrej Zara, ondras@zarovi.cz
	Version: 2.7
	See license.txt for licencing information.
-->
<html>

<head>
    <title>WWW SQL Designer</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1" />
    <meta charset="utf-8" />
    <link rel="stylesheet" title="material-inspired" href="styles/material-inspired.css" media="all" />
    <link rel="alternate stylesheet" title="original" href="styles/original.css" media="all" />
    <!--[if IE 6
      ]><link rel="stylesheet" type="text/css" href="styles/ie6.css"
    /><![endif]-->
    <!--[if IE 7
      ]><link rel="stylesheet" type="text/css" href="styles/ie7.css"
    /><![endif]-->
    <link rel="stylesheet" href="styles/print.css" type="text/css" media="print" />
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js"></script>

    <script src="js/oz.js"></script>
    <script src="js/config.js"></script>
    <script src="js/globals.js"></script>
    <script src="js/visual.js"></script>
    <script src="js/row.js"></script>
    <script src="js/table.js"></script>
    <script src="js/relation.js"></script>
    <script src="js/key.js"></script>
    <script src="js/rubberband.js"></script>
    <script src="js/map.js"></script>
    <script src="js/toggle.js"></script>
    <script src="js/io.js"></script>
    <script src="js/tablemanager.js"></script>
    <script src="js/rowmanager.js"></script>
    <script src="js/keymanager.js"></script>
    <script src="js/window.js"></script>
    <script src="js/options.js"></script>
    <script src="js/wwwsqldesigner.js"></script>
</head>

<body>
    <div id="area"></div>

    <div id="controls">
        <div id="bar">
            <div id="toggle"></div>
            <input type="button" id="saveload" />

            <hr />

            <input type="button" id="addtable" />
            <input type="button" id="edittable" />
            <input type="button" id="tablekeys" />
            <input type="button" id="removetable" />
            <input type="button" id="aligntables" />
            <input type="button" id="cleartables" />

            <hr />

            <input type="button" id="addrow" />
            <input type="button" id="editrow" />
            <input type="button" id="uprow" class="small" /><input type="button" id="downrow" class="small" />
            <input type="button" id="foreigncreate" />
            <input type="button" id="foreignconnect" />
            <input type="button" id="foreigndisconnect" />
            <input type="button" id="removerow" />

            <hr />

            <input type="button" id="options" />
            <a href="https://github.com/ondras/wwwsqldesigner/wiki" target="_blank"><input type="button" id="docs"
                    value="" /></a>
        </div>

        <div id="rubberband"></div>

        <div id="minimap"></div>

        <div id="background"></div>

        <div id="window">
            <div id="windowtitle">
                <img id="throbber" src="images/throbber.gif" alt="" title="" />
            </div>
            <div id="windowcontent"></div>
            <input type="button" id="windowok" />
            <input type="button" id="windowcancel" />
        </div>
    </div>
    <!-- #controls -->

    <div id="opts">
        <table>
            <tbody>
                <tr>
                    <td>* <label id="language" for="optionlocale"></label></td>
                    <td>
                        <select id="optionlocale">
                            <option></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>* <label id="db" for="optiondb"></label></td>
                    <td>
                        <select id="optiondb">
                            <option></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label id="snap" for="optionsnap"></label>
                    </td>
                    <td>
                        <input type="text" size="4" id="optionsnap" />
                        <span class="small" id="optionsnapnotice"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label id="pattern" for="optionpattern"></label>
                    </td>
                    <td>
                        <input type="text" size="6" id="optionpattern" />
                        <span class="small" id="optionpatternnotice"></span>
                    </td>
                </tr>
                <tr>
                    <td>* <label id="style" for="optionstyle"></label></td>
                    <td>
                        <select id="optionstyle">
                            <option></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label id="hide" for="optionhide"></label>
                    </td>
                    <td>
                        <input type="checkbox" id="optionhide" />
                    </td>
                </tr>
                <tr>
                    <td>* <label id="vector" for="optionvector"></label></td>
                    <td>
                        <input type="checkbox" id="optionvector" />
                    </td>
                </tr>
                <tr>
                    <td>* <label id="showsize" for="optionshowsize"></label></td>
                    <td>
                        <input type="checkbox" id="optionshowsize" />
                    </td>
                </tr>
                <tr>
                    <td>* <label id="showtype" for="optionshowtype"></label></td>
                    <td>
                        <input type="checkbox" id="optionshowtype" />
                    </td>
                </tr>
            </tbody>
        </table>

        <hr />

        * <span class="small" id="optionsnotice"></span>
    </div>

    <div id="io">
        <table>
            <tbody>
                <tr>
                    <td style="width: 60%">
                        <fieldset>
                            <legend id="client"></legend>
                            <div id="singlerow">
                                <input type="button" id="clientsave" />
                                <input type="button" id="clientload" />
                            </div>
                            <div id="singlerow">
                                <input type="button" id="clientlocalsave" />
                                <input type="button" id="clientlocalload" />
                                <input type="button" id="clientlocallist" />
                            </div>
                            <div id="singlerow">
                                <input type="button" id="dropboxsave" /><!-- may get hidden by dropBoxInit() -->
                                <input type="button" id="dropboxload" /><!-- may get hidden by dropBoxInit() -->
                                <input type="button" id="dropboxlist" /><!-- may get hidden by dropBoxInit() -->
                            </div>
                            <hr />
                            <input type="button" id="clientsql" />
                        </fieldset>
                    </td>
                    <td style="width: 40%">
                        <fieldset>
                            <legend id="server"></legend>
                            <label for="backend" id="backendlabel"></label>
                            <select id="backend">
                                <option></option>
                            </select>
                            <hr />
                            <input type="button" id="serversave" />
                            <input type="button" id="quicksave" />
                            <input type="button" id="serverload" />
                            <input type="button" id="serverlist" />
                            <input type="button" id="serverimport" />
                        </fieldset>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <fieldset>
                            <legend id="output"></legend>
                            <textarea id="textarea" rows="1" cols="1"></textarea>
                            <!--modified by javascript later-->
                        </fieldset>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="keys">
        <fieldset>
            <legend id="keyslistlabel"></legend>
            <select id="keyslist">
                <option></option>
            </select>
            <input type="button" id="keyadd" />
            <input type="button" id="keyremove" />
        </fieldset>
        <fieldset>
            <legend id="keyedit"></legend>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <label for="keytype" id="keytypelabel"></label>
                            <select id="keytype">
                                <option></option>
                            </select>
                        </td>
                        <td></td>
                        <td>
                            <label for="keyname" id="keynamelabel"></label>
                            <input type="text" id="keyname" size="10" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <hr />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="keyfields" id="keyfieldslabel"></label><br />
                            <select id="keyfields" size="5" multiple="multiple">
                                <option></option>
                            </select>
                        </td>
                        <td>
                            <input type="button" id="keyleft" value="&lt;&lt;" /><br />
                            <input type="button" id="keyright" value="&gt;&gt;" /><br />
                        </td>
                        <td>
                            <label for="keyavail" id="keyavaillabel"></label><br />
                            <select id="keyavail" size="5" multiple="multiple">
                                <option></option>
                            </select>
                        </td>
                    </tr>
                </tbody>
            </table>
        </fieldset>
    </div>

    <div id="table">
        <table>
            <tbody>
                <tr>
                    <td>
                        <label id="tablenamelabel" for="tablename"></label>
                    </td>
                    <td>
                        <input id="tablename" type="text" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label id="tablecommentlabel" for="tablecomment"></label>
                    </td>
                    <td>
                        <textarea rows="5" cols="40" id="tablecomment"></textarea>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script type="text/javascript">
        var d = new SQL.Designer();
      // d.setXhrHeaders({"Authorization": "Bearer xxx"});
      // d.setXhrHeaders({"X-CSRF-TOKEN": "xxx"});
    </script>
</body>

</html>